import React, { useRef, useState } from "react";
import { Button, Form, Input, Space, message } from "antd";
import { LockOutlined, UserOutlined, KeyOutlined } from "@ant-design/icons";
import Captcha from "./Captcha";
import axios from "../service/index";
import { useHistory } from "react-router-dom";

export default function Mobile() {
  let child = useRef();
  let formRef = useRef();
  let history = useHistory();
  let [requestId, setRequestId] = useState(""); // 短信验证码的请求ID，发送成功手机验证码后才能返回
  let [key, setKey] = useState(""); // 验证码的key
  let [time, setTime] = useState(10); // 倒计时5秒
  let [flag, setFlag] = useState(false); // 按钮的状态 false未点击的状态
  const onFinish = (values) => {
    console.log("Success:", values);
    // axios post /api/commmon/auth/mobile code 手机验证码 requestId 后端返回的请求id  mobile 手机号
    // 完成验证码登录
    let code = '6789';
    if(code==='6789' && requestId===1234 && values.mobile==='13622223333'){
      history.push("/dashboard")
      message.success("登录成功")
    }
    
  };

  let timer = null;
  const cutDown = () => {
    if (time === 0) {
      setFlag(false);
      setTime(10);
      clearTimeout(timer);
    } else {
      time--;
      setTime(time);
      timer = setTimeout(() => {
        cutDown();
      }, 1000);
    }
  };
  const send = () => {
    // 1.表单验证  2.验证码验证 3.发送验证码获取requestId  4.开始倒计时
    // 1.表单验证
    console.log(formRef.current); 
    formRef.current.validateFields(["mobile", "captcha"]).then((res) => {
      console.log(res);// {mobile: '13222333456', captcha: '1234'}
      // 2.验证码验证
      axios
        .post("/api/common/captcha/verify", { key, captcha: res.captcha })
        .then((res1) => {
          console.log(res1);
          // 3.发送验证码获取requestId
          // axios
          //   .post("/api/common/sms/send", {
          //     token: res1.context.token,
          //     mobile: res.mobile,
          //     type: 0,
          //   })
          //   .then((res2) => {
          //     console.log(res2);
          message.success("验证码发送成功",1)
          
          // 4.开始倒计时
          console.log("ok");
          setFlag(true);// 倒计时按钮禁用
          // 接口不能使用,用假的发送验证码id
          setRequestId(1234);
          cutDown();
          // });
        });
    });
  };
  return (
    <div>
      <Form onFinish={onFinish} ref={formRef}>
        <Form.Item
          name="mobile"
          rules={[
            {
              required: true,
              pattern: /^1[3-9]\d{9}$/,
              message: "Please input your mobile!",
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "Please input your password!",
            },
          ]}
        >
          <Space>
            <Input prefix={<LockOutlined className="site-form-item-icon" />} />
            <Captcha ref={child} setKey={setKey}></Captcha>
          </Space>
        </Form.Item>
        <Form.Item
          name="captcha"
          rules={[
            {
              required: true,
              message: "Please input your captcha!",
            },
          ]}
        >
          <Space>
            <Input prefix={<KeyOutlined className="site-form-item-icon" />} />
            <Button type="dashed" block onClick={send} disabled={flag}>
              {time === 10 ? "发送验证码" : time + "秒后再发送"}
            </Button>
          </Space>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
